<template>
    <section>
        <el-row>
            <el-col :span="4" v-for="(node, nodeIndex) in currObj.nodeList" class="card">

                <el-card :body-style="{ padding: '0px' }">
                    <div style="padding: 14px;">


                        <el-form>
                            <el-form-item label="名称">
                                {{node.name}}
                            </el-form-item>



                            <el-form-item label="类别">
                                <el-tag>{{myTaskClassName(node)}} </el-tag>
                            </el-form-item>
                            <el-form-item label="依赖" v-if="node.taskClassId !='root'&&node.rely.length>0  ">
                                <el-tag type="warning" v-for="relyObj in myRely(node)">{{relyObj.name}}</el-tag>
                            </el-form-item>
                            <el-form-item label="依赖" v-if="node.taskClassId =='root'">
                                <el-tag type="primary">流程开始</el-tag>
                            </el-form-item>
                            <el-form-item label="依赖" v-if="node.taskClassId!='root'&&node.rely.length==0">
                                <el-tag type="danger">缺少依赖</el-tag>
                            </el-form-item>
                            <el-form-item label="负责人">
                                <el-tag v-for="manager in  getMembers('managers',node)" type="success">
                                    {{manager.name}}
                                </el-tag>
                            </el-form-item>
                            <el-form-item label="参与人">
                                <el-tag v-for="member in  getMembers('members',node)" type="success">
                                    {{member.name}}
                                </el-tag>
                            </el-form-item>

                            <el-form-item label="当前状态" v-if="s!='flowList'">
                                <span v-text="getNodeStatus(node.statusId).name"></span>
                            </el-form-item>

                            <div class="div_node bottom clearfix el-row">






                                <el-button-group>
                                    <el-button class='btn_1' size="mini" icon='caret-left' @click.native="nodeSort(-1,nodeIndex)"></el-button>
                                    <el-button class='btn_1' size="mini" icon='caret-right' @click.native="nodeSort(1,nodeIndex)"></el-button>
                                </el-button-group>


                                <!--<el-button-group>

                                    <el-button size="mini" icon="edit" @click.native="toSaveNode(node)"></el-button>

                                    <el-button size="mini" icon="delete" @click.native="exeCustomerOrderFlow(nodeIndex)"></el-button>
                                </el-button-group>



                                <el-button-group>

                                    <el-button size="mini" icon="setting" @click.native="exeCustomerOrderFlow(node)"></el-button>


                                </el-button-group>-->
                                <el-button-group>
                                    <el-popover trigger="click" placement="bottom" width="50">
                                        <div class="div_caozuo">
                                            <el-row>
                                                <el-button icon="edit" v-if="node.statusId<100 || s=='flowList' " @click.native="toSaveNode(node)">编辑节点</el-button>
                                                <el-button icon="edit" v-if="node.statusId>=100" @click.native="toSaveTask(node)">编辑任务</el-button>
                                            </el-row>

                                            <el-row>
                                                <el-button icon="delete" @click.native="exeCustomerOrderFlow(nodeIndex)">删除节点</el-button>
                                            </el-row>
                                            <el-row v-if="node.statusId<100">

                                                <el-button icon="setting" @click.native="exeCustomerOrderFlow(node)">执行节点</el-button>
                                            </el-row>
                                        </div>
                                        <el-button slot="reference" size="mini" icon='caret-bottom' class="btn_r">操作</el-button>
                                    </el-popover>
                                </el-button-group>

                            </div>
                        </el-form>
                    </div>
                </el-card>
            </el-col>
        </el-row>
        <el-row>
            <!--列表下方按钮-->
            <el-popover ref="popover4" placement="right" width="400" height='500' trigger="click">
                <el-row>
                    <el-autocomplete :fetch-suggestions="queryFlowList" placeholder="请输入拼音简码" @select="selFlow"></el-autocomplete>

                </el-row>

            </el-popover>
            <el-button icon="search" v-popover:popover4></el-button>
            <el-button icon="plus" v-on:click='addNode'></el-button>
        </el-row>





    </section>
</template>
<script src="./flowNodeList.js"></script>
<style lang="scss" scoped>
    .card {
        margin-right: 10px;
        margin-bottom: 10px;
        width: 150px;
    }

    .el-tag {
        margin-right: 5px;
    }

    .el-form-item {

        white-space: nowrap;
        overflow: hidden;

        padding: 0;
        margin: 0;
        height: 32px;
    }

    .div_caozuo {
        line-height: 60px;
        text-align: center
    }

    .btn_r {
        float: right
    }

    .btn_1 {}
</style>